import type { StoryObj } from '@storybook/vue3';
import { ref } from 'vue';
import { ElButton, ElTag } from 'element-plus';
import { ZwUnityKitInputNumber } from '../../../src/ZwUnitykitInputNumber/index';
import './style.scss';

export default {
    title: 'Scrm System/ZwUnityKitInputNumber Library/ZwUnityKitInputNumber',
    component: ZwUnityKitInputNumber,
    tags: ['autodocs'],
    argTypes: {
        modelValue: {
            control: { type: 'number' },
            type: { name: 'number', required: false },
            description:
                '数字绑定的值， 如果type是amount的情况下，v-model的值是以分为单位的数字，输入框中的值会规矩金额单位做自动转换。如果是费率的情况下。则是展示小数点百分比。但v-model 的值是 * 100 的正整数'
        },
        disabled: {
            control: { type: 'boolean' },
            type: { name: 'boolean', required: false }
        },
        amountUnits: {
            control: { type: 'radio' },
            type: { name: 'radio', required: false },
            options: ['YUAN', 'WAN_YUAN']
        },
        type: {
            control: { type: 'radio' },
            type: { name: 'radio', required: false },
            options: ['amount', 'rate']
        },
        min: {
            control: { type: 'number' },
            type: { name: 'number', required: false },
            description: '数字最小值，默认的情况是0，如果是type为费率，。最小值会默认成0.21'
        },
        max: {
            control: { type: 'number' },
            type: { name: 'number', required: false },
            description:
                '数字最大值，如果type是amount的情况，按照要求不能超过16个字符。包含小数点，因此最大值是 99999999999.9999, 如果是rate的情况下，最大值是1.00'
        },
        precision: {
            control: { type: 'number' },
            type: { name: 'number', required: false },
            description: '小数点精度，如果type是amount的情况，是4，如果type是rate的情况，是2'
        }
    }
};

// 默认演示
type Story = StoryObj<typeof ZwUnityKitInputNumber>;
export const Default: Story = {
    render: args => ({
        components: { ZwUnityKitInputNumber, ElButton, ElTag },
        setup() {
            const value = ref();
            const numberValue = ref();
            const setValue = () => {
                value.value = numberValue.value;
            };
            return { args, value, numberValue, setValue };
        },
        template: `
            <main style="width: 473px;">
                <ZwUnityKitInputNumber v-model="value" v-bind="args" />
                <div class="normal-size">最终的绑定的值：{{ value }}</div>

                <div class="normal-size">
                    设置组件的值 <el-input v-model="numberValue" />
                    <el-button @click="setValue">设置</el-button>
                </div>

            </main>
        `
    })
};
